<template>
	<view class="page" v-if="articleDetails">
		<view class="top-box">
			<uni-nav-bar leftIcon="left" title="详情" statusBar :border="false" backgroundColor="#FFFFFF"
				@clickLeft="handleBack"></uni-nav-bar>
		</view>
		<text class="title">{{ articleDetails.name }}</text>
		<text class="time">{{ articleDetails.create_at }}</text>
		<u-line margin="20rpx" length="calc(100% - 40rpx)" />
		<view class="richText">
			<u-parse :content="htmlContent"></u-parse>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		login,
		getArticleList
	} from '@/api/index.js'
	const htmlContent = ref()
	const articleDetails = ref({})
	const articleId = ref()




	onLoad((options) => {
		if (options.id) {
			articleId.value = options.id
			if (options.shared && options.shared == 6) {
				uni.login({
					success: (res) => {
						console.log('login', res);
						loginWithCode(res.code)
					}
				})
			} else {
				getData()
			}
		}
	})

	const loginWithCode = async (code) => {
		let res = await login({
			'code': code
		})
		if (res?.code) {
			console.log(res.data);
			console.log(res.data.token.token);
			uni.setStorageSync('token', res.data.token.token)
			getData()
		}
	}
	onShareAppMessage((res) => {
		return {
			title: articleDetails.value.name || '客满',
			path: `/pages/articleList/details?id=${articleId.value}&shared=6`
		}
	})

	const getData = async () => {
		let res = await getArticleList({
			code: articleId.value
		})
		if (res?.code) {
			console.log(res.data);
			articleDetails.value = res.data || {}
			if (articleDetails.value) {
				htmlContent.value = articleDetails.value.content
			}
		}
	}

	const handleBack = () => {
		uni.navigateBack()
	}
</script>
<style lang="scss" scoped>
	.top-box {
		position: sticky;
		top: 0;
	}

	.page {
		background: white;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-weight: 600;
		margin: 20rpx 30rpx;
		font-size: 36rpx;
		color: #1d1d1d;
	}

	.time {
		margin: 20rpx 30rpx;
		font-size: 28rpx;
		color: #a1a1a1;
	}

	.richText {
		width: 710rpx;
		display: flex;
		flex-direction: column;
		margin: 0 20rpx 20rpx;
	}
</style>